<template>
	<div>
		<!-- 按钮 -->
		<div class='options'>
			<el-button type="primary" size='mini' @click='toAdd'>添加</el-button>
			<div>
				<el-input size='mini'  v-model="queryParams.name" placeholder="请输入栏目名称"></el-input>
			</div>
				<el-button size='mini' type="primary" @click="toSearch">查询</el-button>
		</div>
		<!-- 表格 -->
		<div class='tables'>
		<!-- table.style.height='100px' -->
		<el-table border size='mini' :data="categroyData" height="calc(100vh - 150px)" stripe style="width: 100%">
			<!-- <el-table-column type=index  prop="" label="编号" width="180">
			</el-table-column> -->
			<el-table-column
			align='center'
			type="index"
			label="编号"
			width="100">
			</el-table-column>
			<el-table-column prop="name" label="栏目名称" width="180">
			</el-table-column>
			<el-table-column prop="id" label="序号">
			</el-table-column>
			<el-table-column prop="parentId" label="父栏目">
			</el-table-column>
			<el-table-column fixed="right" label="操作" width="180">
			<template slot-scope="scope">
				<el-button @click="toDelete(scope.row)" type="text" size="mini">删除</el-button>
				<el-button @click="toEdit(scope.row)" type="text" size="mini">编辑</el-button>
			</template>
			</el-table-column>
		</el-table>
		</div>
		<!-- 分页 -->
		<div>
			<el-pagination
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
			:current-page.sync="queryParams.page"
			:page-sizes="[5, 10, 15, 20]"
			:page-size="queryParams.pageSize"
			layout="total,sizes, prev, pager, next"
			:total="total">
			</el-pagination>
		</div>
		<!-- 模态框 -->
		<el-dialog @close='dialogClose' :title="title" :visible.sync="visible">
			<el-form :rules='rules' ref='ruleForm' :model="form">
				<el-form-item prop='name' label="栏目名称" :label-width="formLabelWidth">
				<el-input v-model="form.name" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item prop='id' label="序号" :label-width="formLabelWidth">
				<el-input v-model="form.id" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item
					prop="parentId"
					label="所属栏目"
					:label-width="formLabelWidth"
					>
					<el-select v-model="form.parentId">
						<el-option
						v-for="(item, index) in allCategroyData"
						:key="index"
						:label="item.parentId"
						:value="item.parentId"
						></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="visible = false">取 消</el-button>
				<el-button type="primary" @click="toSave">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
//导入api
import {deleteCategoryById} from '@/api/categroy.js'
import { mapActions, mapGetters, mapState } from 'vuex';
export default {
	data() {
		return {
			queryParams:{
				page:1,
				pageSize:10,
				status:'',
			},
			form:{},
			title:'新增栏目信息',
			visible:false,
			formLabelWidth:'120px',
			rules: {
			name: [
				{ required: true, message: '请输入栏目名称', trigger: 'blur' },
			],
			id: [
				{ required: true, message: '请输入序号', trigger: 'blur' },
			],
			parentId: [
				{ required: true, message: '请选择栏目', trigger: 'change' },
			],

			}
		};
	},
	computed: {
		...mapState("categroy",["allCategroyData"]),
		...mapGetters('categroy',['total','categroyData'])
	},
	methods: {
		...mapActions('categroy',['findAll',"saveOrUpdate","findAllCategory"]),
		//添加
		toAdd(){
			//模态框标题
			this.title='新增栏目信息',
			this.form={}
			//显示模态框
			this.visible=true
			this.findAllCategory();
		},
		//保存栏目信息
		toSave(){
			//校验数据，数据检验通过后再保存
			this.$refs["ruleForm"].validate((valid) => {
				if (valid) {
					this.saveOrUpdate({
						form:this.form,
						queryParams:this.queryParams,
					}).then(()=>{
						//重置表单
						// this.$refs["ruleForm"].resetFields();
						this.visible=false;
					})
				} else {
					console.log('error submit!!');
					return false;
				}
				});
		},
		//重置表单
		dialogClose(){
			this.$refs["ruleForm"].resetFields();
		},
		//查询
		toSearch(){
			// this.queryParams.page=1;
      		this.findAll(this.queryParams);
		},
		//编辑
		toEdit(row){
			console.log(row)
			this.form = {...row};
			// this.form=row;
			this.title='修改顾客信息'
			this.visible=true;
		},
		//toDelete删除
		toDelete(row){
			console.log(row);
			//询问用户是否删除
			this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
				}).then(() => {
				//发请求删除
				deleteCategoryById({id:row.id}).then((res)=>{
					if(res.status===200){
					//提示删除成功，并且刷新数据
					this.$notify({
						title: '成功',
						message: '删除成功',
						type: 'success'
					});
					// this.queryParams.page=1;
					this.findAll(this.queryParams);
					}else{
					this.$notify({
						title: '失败',
						message: '删除失败',
						type: 'error'
					});
					}
				}).catch((err)=>{
					this.$notify({
						title: '失败',
						message: '删除失败',
						type: 'error'
					});
				})
				// this.$message({
				//   type: 'success',
				//   message: '删除成功!'
				// });
				}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除'
				});          
				});
		},
		//每页条数发生变化处理函数
		handleSizeChange(val) {
			// console.log(`每页 ${val} 条`);
			//改数据模型中的pageSize,设置page为1，发起请求
			this.queryParams.pageSize=val;
			this.queryParams.page=1;
			this.findAll(this.queryParams);
		},
		//当页码发生变化的时候
		handleCurrentChange(val) {
			console.log(`当前页: ${val}`);
			//修改数据模型中的数据，并发起请求
			// this.queryParams.page--;
			this.queryParams.page= val;
			this.findAll(this.queryParams);
		}
	},
	created() {
		this.findAll(this.queryParams);
		this.findAllCategory();

	},
	mounted() {}
};
</script>
<style lang="less" scoped>
.options{
    overflow: hidden;
}
  .options > * {
    // overflow: hidden;
    float:left;
    margin-right:10px;
    margin-bottom: 10px;
     & > div {
    width:200px;
   }
  }
</style>